<template>
  <div class="user">
    <basic-container>
      <el-row :span="24">
        <el-col :xs="24" :sm="24" :md="5" class="user__tree">
          <avue-tree :data="deptTreeData" :option="deptTreeOption" @node-click="nodeClick">
            <span class="el-tree-node__label" slot-scope="{node, data}">
              <el-tooltip class="item" effect="dark" content="无数据权限" placement="right-start" v-if="data.isLock">
                <span>
                  {{ node.label }}
                  <i class="el-icon-lock"></i>
                </span>
              </el-tooltip>
              <span v-if="!data.isLock">{{ node.label }}</span>
            </span>
          </avue-tree>
        </el-col>
        <el-col :xs="24" :sm="24" :md="19" class="user__main">
          <avue-crud
            ref="crud"
            v-model="rowData"
            :page.sync="page"
            :permission="permissionList"
            :table-loading="tableLoading"
            :data="tableData"
            :option="tableOption"
            @on-load="getList"
            @row-save="handleSave"
            @row-update="handleUpdate"
            @row-del="handleDel"
            @size-change="sizeChange"
            @current-change="currentChange"
            @search-change="searchChange"
            @refresh-change="refreshChange"
            :before-open="beforeOpen"
          >
          <template slot="menu" slot-scope="scope">
            <el-button v-if="permissions.sys_user_edit" type="text" size="small" icon="el-icon-lock" @click="resetPassword(scope.row,scope.index)">重置密码</el-button>
          </template>
          </avue-crud>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, addObj, putObj, delObj,resetPassword} from "@/api/admin/user";
import {getRoleIdsByUserId} from "@/api/admin/role";
import {fetchTree as fetchDeptTree} from "@/api/admin/dept";
import {tableOption} from "./user";
import {mapGetters} from "vuex";

export default {
  name: "SysUser",
  data() {
    return {
      //部门树相关
      deptTreeData: [],
      deptTreeOption: {
        nodeKey: "id",
        addBtn: false,
        menu: false,
        props: {
          label: "name",
          value: "id"
        }
      },

      //表格
      rowData: {},
      searchForm: {},
      tableLoading: true,
      tableData: [],
      tableOption: tableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条,
      },

      checkedKeys: [],
      role: [],
      roleData: [],
      defaultProps: {
        label: "name",
        value: "id"
      },


    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.sys_user_add, false),
        editBtn: this.vaildData(this.permissions.sys_user_edit, false),
        delBtn: this.vaildData(this.permissions.sys_user_del, false)
      };
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      fetchDeptTree().then(response => {
        this.deptTreeData = response.data.data;
      });
    },
    nodeClick(data) {
      this.page.pageSize = 1;
      this.getList(this.page, {deptId: data.id});
    },

    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      ).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
      });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange(param, done) {
      this.searchForm = param;
      this.page.currentPage = 1;
      this.getList(this.page, param);
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
    handleSave(row, done, loading) {
      addObj(row).then(() => {
        this.$message.success("创建成功");
        this.getList(this.page);
        done();
      });
    },
    handleUpdate(row, index, done, loading) {
      row.roleIds=row.roleIds.split(",");
      putObj(row).then(() => {
        this.$message.success("修改成功");
        this.getList(this.page);
        done();
      });
    },
    handleDel(row, index) {
      this.$confirm("此操作将永久删除该用户(用户名:" + row.username + "), 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.userId).then(() => {
          this.$message.success("删除成功");
          this.getList(this.page);
        });
      });
    },
    beforeOpen(show, type) {

      // 通过用户ID查询角色列表
      if(type=="edit"){
        getRoleIdsByUserId(this.rowData.id).then(response => {
          this.$set(this.$refs.crud.tableForm,"roleIds",response.data.data)
        });
      }
      show();
    },

    resetPassword(row){
      resetPassword(row.id).then(res=>{
        this.$message.success("重置成功");
      })
    }

  }
};
</script>
<style lang="scss">
.user {
  height: 100%;

  &__tree {
    padding-top: 3px;
    padding-right: 20px;
  }

  &__main {
    .el-card__body {
      padding-top: 0;
    }
  }
}
</style>
